import { useRef, useEffect } from 'react'
import { Graph } from '@antv/x6'
import { getData } from '@/services/data'
function App() {
  const container = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const el = container.current
    if (!el) return
    const graph = new Graph({
      container: container.current,
      width: 800,
      height: 600,
      background: {
        color: '#F2F7FA',
      },
    })
    async function loadData() {
      const res = await getData()
      graph.fromJSON(res)
      graph.centerContent()
    }
    loadData()
  }, [])
  return <div ref={container}></div>
}

export default App
